<template>
    <div class="Home" style="width: 800px; height: 2000px; ">

        <el-container>
            <el-header>图书管理系统</el-header>

          <el-main style="width: 800px;"
                     >


                <div v-for='(item,index) in data'>
                    <HomeBookCard :bookName=item.bookName :bookNumber=item.bookNumber :BookComment=item.BookComment
                                  :image=item.image :index="index"></HomeBookCard>
                   
                </div>



            </el-main>

            <el-footer>
                <el-pagination
                        layout="prev, pager, next"
                        :total="(count/5)*10"
                        :page-count="5"
                        @current-change="change_page"

                >
                </el-pagination>
            </el-footer>
        </el-container>


    </div>

</template>

<script>
    // @ is an alias to /src
    import HomeBookCard from '@/components/HomeBookCard.vue'
    import {mapState} from 'vuex'

    export default {

        name: 'Home',
        data() {
            return {
                page: 1,
                count: null,
              fullscreenLoading: true
            }
        },
        components: {
            HomeBookCard
        },
        methods: {
            change_page: function (val) {
              this.fullscreenLoading = true;
                this.page = val;
                this.$store.dispatch("getBooks", {page: (this.page - 1) * 5, pageSize: 5})
                console.log(this.page)

            }, getCounts: function () {

                var _this = this
                axios.get("http://www.qjhyuki.top/vuehomeword/librarymanagementsystem/api/get_books_count.php").then(({data}) => {
                    _this.count = data

                })
            },

        },

        created() {
            this.$store.dispatch("getBooks", {page: 0, pageSize: 5})

            this.getCounts()

        },
        computed: {
            ...mapState(['data'])
        }
    }
</script>
